<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Preview of orbits.lib.js</title>
        <style>
            html, body {
                border: 0;
                padding: 0;
                margin: 0;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 100%"></div>
        <script src="http://maps.google.com/maps/api/js?v=3.10&libraries=geometry&sensor=false&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="orbits.js" type="text/javascript"></script>
        <script type="text/javascript">

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(0,0),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    keyboardShortcuts: false,
    streetViewControl: false,
    rotateControl: false,
    panControl: false,
    scaleControl: false,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.DEFAULT
    },
    scrollwheel: true
});

var stations;
var sats = [];

$.get("stations.txt", function(data) {
    stations = orbits.util.parseTLE(data);
    //console.log(stations);

    var i = 0;
    for(;i < stations.length; i++) {
        var name = stations[i].name;
        var satOpts = {
            map: map,
            tle: stations[i],
            pathLength: 2,
        };

        if(name == "ISS (ZARYA)") {
            satOpts.markerOpts = {
                icon: {
                    url: "img/iss.png",
                    size: new google.maps.Size(65,50),
                    scaledSize: new google.maps.Size(65,50),
                    anchor: new google.maps.Point(30,30),
                },
            };

            satOpts.polylineOpts = {
                strokeWeight: 2,
                strokeColor: "blue",
                strokeOpacity: 0.6
            };
        }
        else if(name == "TIANGONG 1") {
            satOpts.markerOpts = {
                icon: {
                    url: "img/TIANGONG1.png",
                    size: new google.maps.Size(70,40),
                    scaledSize: new google.maps.Size(70,40),
                    anchor: new google.maps.Point(25,10),
                },
            };

            satOpts.polylineOpts = {
                strokeWeight: 2,
                strokeColor: "#c700e6",
                strokeOpacity: 0.6
            };
            satOpts.shadowPolylinesOpts = {
                strokeColor: "#c700e6",
            }
        }
        else {
            continue;
        }

        var sat = new orbits.Satellite(satOpts);
        sat.refresh()
        sat.refresh_path();
        sats.push(sat);
    }

    setInterval(function() {
        var i = 0;
        for(;i < sats.length; i++) sats[i].refresh();
    }, 500);

    setInterval(function() {
        var i = 0;
        for(;i < sats.length; i++) sats[i].refresh_path();
    }, 5*60000);
});

        </script>
    </body>
</html>
